<template>
  <div>
    <ChartTools class="chart">
      <template v-slot:left>
        <h3>日销售统计</h3>
        <div class="left">
          <div>
            <div class="number">{{ chart.orderAmount }}</div>
            <p>当日销售量(个)</p>
          </div>
          <div>
            <div class="number">{{ chart.totalCount }}</div>
            <p>当前销售额(元)</p>
          </div>
          <div>
            <div class="number">{{ chart.totalBill }}</div>
            <p>当日分成(元)</p>
          </div>
        </div>
      </template>
      <template v-slot:right>
        <h3>月销售统计</h3>
        <div class="right">
          <div>
            <div class="number">{{ top.totalCount }}</div>
            <p>当日销售量(个)</p>
          </div>
          <div>
            <div class="number">{{ (top.orderAmount / 1000000).toFixed(2) }}</div>
            <p>当前销售额(元)</p>
          </div>
          <div>
            <div class="number">{{ top.totalBill / 100 }}</div>
            <p>当日分成(元)</p>
          </div>
        </div>
      </template>
    </ChartTools>
    <el-card class="main">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="合作商">
          <el-select
            v-model="formInline.partnerName"
            placeholder="请选择"
            style="width: 80%"
            clearable
            @change="changeValue"
          >
            <el-option
              v-for="item in partnerSearch"
              :key="item.id"
              :label="item.name"
              :value="`${item.id}|${item.name}`"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择日期" prop="Time">
          <el-date-picker
            v-model="Time"
            type="daterange"
            unlink-panels
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @change="selectTime"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="Search"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col
          :span="4"
        ><div>
          笔数统计:<span>{{ top.totalCount }}</span>元
        </div></el-col>
        <el-col
          :span="4"
        ><div>
          收入统计:<span>{{ top.orderAmount / 100 }}</span>元
        </div></el-col>
        <el-col
          :span="4"
        ><div>
          分成统计:<span>{{ top.totalBill / 100 }}</span>元
        </div></el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="list"
        style="width: 100%"
        :header-cell-style="{
          fontWeight: 'normal',
          background: '#f3f6fb',
        }"
      >
        <el-table-column label="订单日期" prop="date" />
        <el-table-column label="合作商" prop="ownerName" />
        <el-table-column label="分成比例" prop="ratio">
          <template #default="{ row }">
            {{ `${row.ratio}%` }}
          </template>
        </el-table-column>
        <el-table-column label="收入(元)" prop="orderTotalMoney">
          <template #default="{ row }">
            {{ `${row.orderTotalMoney / 100}` }}
          </template>
        </el-table-column>
        <el-table-column label="笔数" prop="orderCount" />
        <el-table-column label="分成金额(元)" prop="totalBill">
          <template #default="{ row }">
            {{ `+${row.totalBill / 100}` }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row
        v-if="totalPage !== 1"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-col :span="19">
          <p class="paginationHeader">
            {{ `共${totalCount}条记录 第${page.pageIndex}/${totalPage}页` }}
          </p>
        </el-col>
        <el-col :span="5">
          <el-pagination
            background
            :current-page="page.pageIndex"
            :page-size="page.pageSize"
            :total="totalCount"
            layout="prev, next"
            prev-text="上一页"
            next-text="下一页"
            @current-change="changePage"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  getDateStart,
  getDateEnd,
  getDateEndTime,
  getDateStartTime
} from '@/utils/getTime'
import {
  partnerCollectList,
  orderCount, // 当日销售两
  orderAmount, // 当前销售额
  totalBill, // 当日分成
  partnerList
} from '@/api/report'
export default {
  data() {
    return {
      Time: '',
      formInline: { partnerName: '', start: '', end: '' },
      partnerId: null,
      loading: false,
      list: [],
      partnerSearch: [],
      pageOption: {
        pageIndex: 1,
        pageSize: 100000
      },
      page: {
        pageIndex: 1,
        pageSize: 10,
        start: getDateStart(),
        end: getDateEnd()
      },
      time: {
        start: getDateStartTime(),
        end: getDateEndTime()
      },
      timeChart: {
        start: `${getDateEnd()} 00:00:00`,
        end: getDateEndTime()
      },
      totalCount: 0,
      totalPage: 0,
      top: {
        totalCount: '', // 笔数统计
        orderAmount: '', // 收入统计
        totalBill: '' // 分成统计
      },
      chart: {
        totalCount: '',
        orderAmount: '',
        totalBill: ''
      }
    }
  },
  async created() {
    this.Time = [getDateStart(), getDateEnd()]
    this.partnerCollectList()
    this.partnerList()
    // 笔数统计
    const { data } = await orderCount(this.time)
    this.top.totalCount = data
    // 收入统计
    const { data: data1 } = await orderAmount(this.time)
    this.top.orderAmount = data1
    const { data: data2 } = await totalBill(this.time)
    this.top.totalBill = data2
    // 笔数统计
    const { data: count } = await orderCount(this.timeChart)
    this.chart.orderAmount = count
    // 收入统计
    const { data: amount } = await orderAmount(this.timeChart)
    this.chart.totalCount = amount
    const { data: bill } = await totalBill(this.timeChart)
    this.chart.totalBill = bill
  },
  methods: {
    // 表格数据
    async partnerCollectList(formInline) {
      this.loading = true
      const { data } = await partnerCollectList({
        ...this.page,
        ...formInline
      })
      this.list = data.currentPageRecords
      this.loading = false
      this.totalCount = Number(data.totalCount)
      this.totalPage = Number(data.totalPage)
    },
    // 合作商搜索下拉数据
    async partnerList() {
      const { data } = await partnerList(this.pageOption)
      this.partnerSearch = data.currentPageRecords
    },
    changeValue(val) {
      const [id, name] = val.split('|')
      this.formInline.partnerName = name
      this.partnerId = id
    },
    // 1.查询
    async Search() {
      this.partnerCollectList(this.formInline)
      this.time.partnerId = this.partnerId
      const { data } = await orderCount(this.time)
      this.top.totalCount = data
      // 收入统计
      const { data: data1 } = await orderAmount(this.time)
      this.top.orderAmount = data1
      const { data: data2 } = await totalBill(this.time)
      this.top.totalBill = data2
    },
    // 2.新增
    addForm() {},
    // 3.分页
    changePage(val) {
      this.page.pageIndex = val
      this.partnerCollectList()
    },
    // 4.查看详情
    detailsFn() {},
    // 1.获取开始时间和结束时间
    selectTime(data) {
      if (data === null) {
        // 日期选择器改变事件 ~ 解决日期选择器清空 值不清空的问题
        this.formInline.start = ''
        this.formInline.end = ''
      } else {
        this.formInline.start = data[0]
        this.formInline.end = data[1]
      }
    }
  }
}
</script>

<style lang="scss">
.el-col-4 {
  color: #333333;
  font-size: 14px;
  span {
    font-size: 20px;
    color: #ff5757;
  }
}
</style>
